<!-- 单据统计 -->
<template>
   <div class="purchase_order_statistics">
      <div class="title">
         单据统计
      </div>
      <div class="head">
         <div>
            <!-- <CityInit/> -->
         </div>
         <div class="head_title">
            <el-radio-group 
               v-model="radio" 
               size="mini"
               text-color="#6464f7"
               class="radio_el_owner"
               @input="getList"
               >
               <el-radio-button label="1">按月</el-radio-button>
               <el-radio-button label="2">按周</el-radio-button>
               <el-radio-button label="3">按天</el-radio-button>
            </el-radio-group>
         </div>
      </div>
      <div class="head_center" id="purchase_echarts" v-loading="loading">

      </div>
      
      <div class="echarts_table">
         <el-table :data="chartData" style="width:100%;" class="jk-table" border :show-header="false">
            <!-- <el-table-column type="index" width="30" class-name="iconfont icon-circle" /> -->
            <el-table-column v-if="data3.length == 6" prop="name" label="" align="center">
               <template slot-scope="scope">
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                     <div style="width: 34px;height: 20px;border-radius: 4px" :style='`background:${scope.row.color}`'></div>
                     {{scope.row.name}}
                  </div>
               </template>
            </el-table-column>
            <el-table-column v-else width="140" prop="name" label="" align="center">
               <template slot-scope="scope">
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                     <div style="width: 34px;height: 20px;border-radius: 4px" :style='`background:${scope.row.color}`'></div>
                     {{scope.row.name}}
                  </div>
               </template>
            </el-table-column>
   
            <el-table-column
               v-for="(item,index) in data2"
               :label="item"
               :key="index"
               min-width="116%"
               align="center"
            >
               <template slot-scope="scope">
                  {{scope.row.data[index]}}
               </template>
            </el-table-column>
         </el-table>
         <div>
            <div></div>
            <div></div>
            <div></div>
         </div>
      </div>
   </div>
</template>

<script>
import * as echarts from 'echarts';
import {
   disBillHomePurchaseQty
} from "@/api/home/purchase_order_statistics";
export default{
   name:"dealer",
   data(){
      return{
         radio:'1',
         value:'',
         chartData : [
               { 
                  type: 'bar',
                  barGap: 0,
                  emphasis: {
                     focus: 'series'
                  },
                  label: {
                     show: true,
                     position: 'top',
                     formatter:'{c}单'
                  },
                  data: [], 
                  name: '采购订单数' 
               },
               { 
                  type: 'bar',
                  barGap: 0,
                  emphasis: {
                     focus: 'series'
                  },
                  label: {
                     show: true,
                     position: 'top',
                     formatter:'{c}单'
                  },
                  data: [], 
                  name: '采购入库数' 
               },
               { 
                  type: 'bar',
                  barGap: 0,
                  emphasis: {
                     focus: 'series'
                  },
                  label: {
                     show: true,
                     position: 'top',
                     formatter:'{c}单'
                  },
                  data: [], 
                  name: '销售出库数' 
               },
               { 
                  type: 'bar',
                  barGap: 0,
                  emphasis: {
                     focus: 'series'
                  },
                  label: {
                     show: true,
                     position: 'top',
                     formatter:'{c}单'
                  },
                  data: [], 
                  name: '销售退货数' 
               },
         ],
         chartColors : ['#426de4','#e76124','#4a984d','#edb335'],
         data2:[],
         data3:[],
         loading: false
      }
   },
   methods:{
      initialize(){
         let that = this
         console.log(111);
         let myChart = echarts.init(document.getElementById('purchase_echarts'));
         console.log(myChart);
         let option={
            grid:{
               bottom:'15%',
            },
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               }
            },
            legend: {
               data: ['Forest', 'Steppe', 'Desert', 'Wetland']
            },
            toolbox: {
               show: true,
               orient: 'vertical',
               left: 'right',
               top: 'center',
            },
            xAxis: [
               {
                  type: 'category',
                  // axisTick: { show: false },
                  data: this.data2,
                  axisLabel:{
                     formatter: function(value,index){                        
                        if (that.data2.length > 4) {
                           
                           if (value.length > 10) {
                              return [that.data3[index],value.substring(0, 10) + '\n' + value.substring(10)].join('\n');
                           } else {
                              return [
                                 that.data3[index],
                                 value,
                              ].join('\n');
                           }
                           
                        }else{
                           return [
                              that.data3[index],
                              value,
                           ].join('\n');

                        }
                     }
                        
                  }
               }
            ],
            yAxis: {
               type: 'value',
               splitLine: {
                  show: false
               },
               axisLabel:{
                  formatter:'{value}单'
               }
            },

            series:[
               ...this.chartData
            ]

         }

         myChart.setOption(option);

         window.addEventListener("resize", function () {
            myChart.resize();
         });
      },
      TableRowStyle ({ row, rowIndex }){
           // 注意，这里返回的是一个对象
           console.log(row);
           let rowBackground = {};
           rowBackground.color = row.color;
           return rowBackground;
       },
      getList(){
         this.loading = true
         disBillHomePurchaseQty({
            dateType: this.radio
         }).then((res) => {
            console.log(res.data);
            function processingData (val){

            }
            this.data2 = []
            this.data3 = []
            const list = res.data.slice(0, 6);
            list.sort(function(x,y) {return ((y.purchaseOrderBillQty - 0) + (y.purchaseInBillQty - 0) + (y.sellOutBillQty - 0) + (y.sellReturnBillQty)) - ((x.purchaseOrderBillQty - 0) + (x.purchaseInBillQty - 0) + (x.sellOutBillQty - 0) + (x.sellReturnBillQty))})
            
            let array1 = []
            let array2 = []
            let array3 = []
            let array4 = []
            list.forEach((item)=>{
               this.data2.push(item.name)
               this.data3.push((item.purchaseOrderBillQty - 0) + (item.purchaseInBillQty - 0) + (item.sellOutBillQty - 0) + (item.sellReturnBillQty))
               array1.push(item.purchaseOrderBillQty)
               array2.push(item.purchaseInBillQty)
               array3.push(item.sellOutBillQty)
               array4.push(item.sellReturnBillQty)
               
            })
            this.chartData.forEach((item)=>{
                  switch (item.name) {
                     case '采购订单数':
                        item.data = array1

                        break;
                     case '采购入库数':
                        item.data = array2

                        break;
                     case '销售出库数':
                        item.data = array3

                        break;
                     case '销售退货数':
                        item.data = array4

                        break;
                  }

            })
            console.log(this.data2);
            console.log(this.data3);
            this.loading = false
            this.initialize()
         }).catch((err) => {
            this.loading = false
            this.initialize()
         });
      },
   },
   mounted(){
      this.getList()
      this.initialize()
   },
   created(){
      this.chartData.forEach( (x, key) => {
            this.chartColors.forEach( (i, keyss) => {
               if( key == keyss) {
                  x.color = i
               }
            })
      })
   },
}
</script>

<style lang='less'>
.purchase_order_statistics{
   padding:10px 20px;
   box-sizing: border-box;
   .title{
      font-weight:900;
      color: black;
      font-size: 18px;
      margin: 10px 0;
   }
   .head{
      display: flex;
      justify-content: space-between;
      
      .radio_el_owner{

         .el-radio-button{
            //从这里开始 就是更改颜色的代码，将你的颜色 改掉我的颜色就可以了
            .el-radio-button__inner{                               
               margin-bottom: px(5);
               background-color:#fff;
               &:hover{
                  border-color: #6464f7;

               }
               // &.is-checked {
               //    .el-radio__inner{
               //       background-color:#28D4C1;
               //       border-color:#28D4C1; 
               //       }
               // }
               // .el-radio__inner{
               //    &:hover{
               //          border-color:hsl(216, 92%, 51%);
               //    }
               // }
            }
         }
      }
      .head_title{
         display: flex;
         .radio_el_owner{
            margin-right: 10px;
         }
      }
   }
   .head_center{
      width: 100%;
      height: 360px;
   }
   .echarts_table{
      // padding: 0 20px;
      padding-right: 10%;
      box-sizing: border-box;
   }
}
</style>